<template>
  <div class="search4s">
    <div class="search_box">
      <div class="box_search">
        <p class="title">
          <a :class="{'each-tab': true, 'is-active': activeValue === 1}" @click="activeValueChange(1)">找用品</a>
          <a :class="{'each-tab': true, 'is-active': activeValue === 2}" @click="activeValueChange(2)">找配件</a>
          <a :class="{'each-tab': true, 'is-active': activeValue === 3}" @click="activeValueChange(3)">找服务</a>
        </p>
        <div class="searchBox">
          <div class="searchs">
            <a-input-search placeholder="车型，商品名称，品牌，零件号，供应商" enter-button="搜索采购" size="large" @search="onSearch" />
            <p style="padding-top:8px"> <a>欧版金美孚</a> <a>奔驰大桶油</a> <a>常用搜索词条</a></p>
            <div class="search_button" @click="onSearch">
              <span>货品找不到？价格不满意?</span>
              <span><img src="../../../assets/image/home/foot.png" alt=""> 立即寻源</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeValue: 1, //当前选中类型
    }
  },
  methods: {
    activeValueChange(val) {
      this.activeValue = val;
    },
    onSearch() {
      this.$router.push('/homes/searchView/search4S?id=1');
    },
  },
}
</script>
<style lang="less" scoped>
.search4s {
  width: 100%;
  background: #fff;
  .search_box {
    background-color: @greyBackground;
    .box_search {
      width: @mainViewAreaWidth;
      position: relative;
      margin: 0 auto;
      padding-top: 24px;
      .title > a {
        font-size: 14px;
        color: @colorCommonFont;
        margin-right: 24px;
      }
      .is-active {
        color: @activeRed !important;
      }
      .searchBox {
        width: 700px;
        padding-bottom: 1px;
        /deep/ .ant-btn-lg {
          padding: 0 21px;
          font-size: 14px;
        }
        /deep/ .ant-btn-primary {
          background: @activeRed;
          border: 1px solid @activeRed;
        }

        /deep/ .ant-input {
          border: 2px solid @greyBorder;
          border-right: none;
          &:hover {
            border-color: @greyBorder;
            border: 2px solid @greyBorder;
            border-right: none;
          }
          &:focus {
            box-shadow: 0 0 0 0 rgb(255, 255, 255);
            border-right: none;
          }
        }
        /deep/ .ant-input-lg {
          font-size: 14px;
        }
        .searchs {
          > p a {
            font-size: 12px;
            margin-right: 24px;
            color: @placeHolderColor;
          }
          > p a:nth-child(1) {
            color: @activeRed;
          }
        }
        .search_button {
          width: 300px;
          height: 40px;
          margin: 40px auto 48px;
          position: absolute;
          right: 100px;
          top: 20px;
          background: #3b82ff;
          color: #fff;
          border-radius: 40px;
          text-align: center;
          cursor: pointer;
          span {
            line-height: 40px;
            color: #eeeeee;
          }
          span:nth-child(1) {
            margin-right: 5px;
          }
          span:nth-child(2) {
            font-size: 18px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            img {
              vertical-align: sub;
            }
          }
        }
      }
    }
  }
}
</style>